<template>
<nav>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1" class="logo">
  <img src="/src/assets/logo.png" @click="back()"></img>
  </el-menu-item>
  <span class="search">
    <el-input
    placeholder="一个可选的搜索功能"
    icon="search"
    v-model="input2"
    :on-icon-click="handleIconClick">
    </el-input>
  </span>

  <el-submenu index="2" class="right">
    <!--<template slot="title">{{tmessage}}</template>-->
    <template v-if="this.$store.state.login.isShowLogin">
    <template slot="title">{{this.$store.state.login.email}}</template>
    </template>
    <template v-else>
    <template slot="title">游客</template>
    </template>
    <template v-if="this.$store.state.login.isShowLogin">
    <router-link to="/userinfo"><el-menu-item index="userinfo" @click="userinfo()">个人主页</el-menu-item></router-link>
    <router-link to="/listpool"><el-menu-item index="listpool" @click="">关注的池子</el-menu-item></router-link>
    <router-link to="/listmsg"><el-menu-item index="listmsg" @click="">收藏的消息</el-menu-item></router-link>
    <el-menu-item index="logout" @click="logout()">退出</el-menu-item>
    </template>
    <template v-else>
    <router-link to="/signin"><el-menu-item index="signin" >登录</el-menu-item></router-link>
    <router-link to="/register"><el-menu-item index="register">注册</el-menu-item></router-link>
    </template>
  </el-submenu>
</el-menu>
</nav>
</template>

<script>
import VueRouter from 'vue-router'
import axios from 'axios'
import store from './vuex/store'

const myApi = axios.create({
  baseURL: 'http://localhost:8081/api',
  withCredentials: true,
  headers: {
    'Accept' : 'application/json',
    'Content-Type': 'application/json',
  }
});

  export default {
    data() {
      return {
        data:{
            email: '',
            uid: '',
            username: '',
            emailstatus: '',
            status: '',
            exp: '',
            gold: ''
        },
        activeIndex: '1',
        input2: '',
        message: '123',
        islogin: false
      };
    },
    // props: [
    //   'message','islogin'
    // ],
    // computed: {
    //   tmessage: function(){
    //     return this.message;
    //   }
    // },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      handleIconClick(ev) {
        console.log(ev);
      },
      back(){
            this.$store.dispatch('setlabel' , { 
                     'label' : 0,
                     });
            this.$router.push('/');
      },
      userinfo(){
        // var thisVue = this;
        // myApi.get('/userinfo')
        //         .then(function (response) {
        //             console.log(response);
        //             // this.data.uid = response.body.message.uid;
        //             // this.data.username = response.body.message.username;
        //             // this.data.email = response.body.message.email;
        //             // this.data.emailstatus = response.body.message.emailstatus;
        //             // this.data.status = response.body.message.status;
        //             // this.data.exp = response.body.message.exp;
        //             // this.data.gold = response.body.message.gold;
        //             thisVue.$store.dispatch('showuserinfo' , { 
        //               'uid' : response.data.message.uid , 
        //               'username' : response.data.message.username ,
        //               'email' :response.data.message.email ,
        //               'emailstatus' :response.data.message.emailstatus ,
        //               'status' :response.data.message.status ,
        //               'exp' :response.data.message.exp,
        //               'gold' :response.data.message.gold
        //               });
        //         })
        //         .catch(function (error) {
        //             console.log(error);
        //         });
      },
      logout(){
        var thisVue = this;
        myApi.get('/logout')
                  .then(function (response) {
                    // success callback
                    console.log(response);
                    if (response.data.id == 0) {
                        //退出成功，刷新页面
                        thisVue.$store.dispatch('logOut' , false );
                        //window.location.href = "#/";
                        thisVue.$router.push('/');
                    }
                });
      },
      
    }
  }
</script>

<style>
.logo:hover {
  border-bottom:none !important;
}
.logo {
  font-size:18px;
  color:#20a0ff;
  border-bottom:none !important;
  text-align:center;
  line-height:80px;
}
.logo img{
  display:block;
  max-width:50px;
  max-height:50px;
  margin-top:15px;
  margin-left:15px;
}
.el-menu .right {
  float:right !important;
  margin-right:20px;
}
.search {
  display:inline-block;
  line-height: 60px;
}
.el-input__inner:hover{
  border-color: rgba(202, 224, 255, 0);
}
</style>
